<template>
  <view class="container">
    <tech-nav-bar title="我的" :currentPage="'/pages/technician/my'"></tech-nav-bar>
    <view class="my-container">

      <!-- 用户信息 -->
      <view class="user-info">
        <view class="avatar-box" @tap="goToProfile">
          <image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" mode="aspectFill" class="avatar"></image>
          <text v-else>暂无头像</text>
        </view>
        <view class="user-detail">
          <text class="name">{{userInfo.realName || '未设置姓名'}}</text>
          <view class="employee-no">
            <text>工号：{{userInfo.memberNo || '--'}}</text>
          </view>
        </view>
        <view class="logout-btn" @tap="handleLogout">
          <text>退出登录</text>
        </view>
      </view>

      <!-- 数据统计卡片 -->
      <view class="stat-cards">
        <view class="stat-row">
          <view class="stat-item">
            <image class="stat-icon" src="/static/icon/VIP_vip.svg" mode="aspectFit"></image>
            <text class="stat-label">综合评分</text>
            <text class="stat-value">{{ stats.rating || '0' }}</text>
          </view>
          <view class="stat-item" @tap="goToWallet">
            <image class="stat-icon" src="/static/icon/bank-card.png" mode="aspectFit"></image>
            <text class="stat-label">账户余额</text>
            <text class="stat-value">{{ stats.walletBalance || '0.00' }}元</text>
          </view>
        </view>
      </view>

      <!-- 接单设置 -->
      <view class="section-title">
        <text class="title-bar"></text>
        <text>接单设置</text>
      </view>

      <!-- 功能菜单列表 -->
      <view class="menu-list">
        <view class="menu-item" @tap="goToProfile">
          <text>个人信息</text>
          <view class="right-content">
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
        <view class="menu-item" @tap="goToContract">
          <text>合同管理</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>

      <!-- 结算与统计 -->
      <view class="section-title">
        <text class="title-bar"></text>
        <text>结算与统计</text>
      </view>

      <!-- 统计菜单列表 -->
      <view class="menu-list">
        <view class="menu-item" @tap="goToStats">
          <text>数据统计</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <!-- <view class="menu-item" @tap="goToUsermanager">
          <text>用户管理</text>
          <text class="iconfont icon-arrow-right"></text>
        </view> -->
        <view class="menu-item" @tap="goToOrder">
          <text>订单结算</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        <view class="menu-item" @tap="goToWallet">
          <text>收入提现</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
		
      </view>
	  <!-- 其他功能 -->
	  <view class="section-title">
	    <text class="title-bar"></text>
	    <text>其他功能</text>
	  </view>
	  
	  <!-- 其他功能列表 -->
	  <view class="menu-list">
	    <view class="menu-item" @tap="goToSupplies">
	      <text>物料商城</text>
	      <text class="iconfont icon-arrow-right"></text>
	    </view>
	    <view class="menu-item" @tap="goToCallback">
	      <text>意见反馈</text>
	      <text class="iconfont icon-arrow-right"></text>
	    </view>
	  </view>
	  
	  <!-- 版本信息 -->
	  <view class="version-info">
	  </view>
    </view>
  </view>
</template>

<script>
import TechNavBar from '@/components/tech-nav-bar.vue'

export default {
  components: {
    TechNavBar
  },
  data() {
    return {
      unreadCount: 1,
      userInfo: {
        realName: '',
        memberNo: '',
        avatarUrl: '',
        isAuthorized: false,
        techId: ''
      },
      stats: {
        rating: 0,
        walletBalance: '0.00'
      }
    }
  },
  onLoad() {
    // 初始化加载数据
    this.getUserInfo()
    this.loadTechnicianRating()
    this.loadWalletBalance()
  },
  onShow() {
    // 每次显示页面时获取最新的用户信息
    this.getUserInfo()
    this.loadTechnicianRating()
    this.loadWalletBalance()
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      const userInfo = uni.getStorageSync('userInfo')
      if (userInfo) {
        this.userInfo = {
          ...this.userInfo,
          ...userInfo
        }
      }
    },
    
    // 加载技师评分
    async loadTechnicianRating() {
      if (!this.userInfo.techId) {
        console.error('未找到技师ID')
        return
      }

      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/technician/technician/${this.userInfo.techId}`,
          method: 'GET'
        })

        if (result.data.code === 200 && result.data.data) {
          // 更新技师评分
          const technicianData = result.data.data
          this.stats.rating = technicianData.score || 0
          console.log('技师评分:', this.stats.rating)
        } else {
          throw new Error(result.data.msg || '获取技师评分失败')
        }
      } catch (err) {
        console.error('获取技师评分失败:', err)
      }
    },
    
    // 加载钱包余额
    async loadWalletBalance() {
      if (!this.userInfo.techId) {
        console.error('未找到技师ID')
        return
      }

      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/techWallet/techWallet/listAll`,
          method: 'GET',
          data: {
            technicianId: this.userInfo.techId
          }
        })

        if (result.data.code === 200 && result.data.rows && result.data.rows.length > 0) {
          // 更新钱包余额
          const walletData = result.data.rows[0]
          this.stats.walletBalance = this.formatAmount(walletData.balance || 0)
          console.log('钱包余额:', this.stats.walletBalance)
        } else {
          console.log('没有找到钱包数据')
        }
      } catch (err) {
        console.error('获取钱包余额失败:', err)
      }
    },
    
    // 格式化金额，保留两位小数
    formatAmount(amount) {
      return parseFloat(amount || 0).toFixed(2)
    },
	  handleLogout() {
	    uni.showModal({
	      title: '提示',
	      content: '确定要退出登录吗？',
	      success: (res) => {
	        if (res.confirm) {
	          // 清除所有存储

            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('memberId')
	          
	          // 重置用户信息
	          this.isLogin = false
	          this.userInfo = {
	            nickName: '',
	            avatarUrl: '',
	            gender: 0,
	            phone: '',
	            memberNo: '',
	            memberId: '',
	            openId:'',
	            birthday:'',
	            totalPoints: 0,
	            availablePoints: 0,
	            totalAmount: 0,
	            memberLevel: 0
	          }
	          
	          // 保存重置后的用户信息
	          uni.setStorageSync('userInfo', JSON.stringify(this.userInfo))
	          
	          uni.showToast({
	            title: '已退出登录',
	            icon: 'success'
	          })
	          
	          // 退出登录后跳转到登录页面
	          setTimeout(() => {
	            // 使用reLaunch替代reLaunch，避免导航堆栈问题
	            uni.reLaunch({
	              url: '/pages/login/login',
	              fail: (err) => {
	                console.error('跳转失败:', err)
	                // 如果跳转失败，尝试使用navigateTo
	                uni.navigateTo({
	                  url: '/pages/login/login'
	                })
	              }
	            })
	          }, 1000)
	        }
	      }
	    })
	  },
    goToUsermanager() {
      uni.navigateTo({ url: '/pages/technician/usermanager' })
    },
	goToContract() {
      uni.navigateTo({ url: '/pages/technician/contract' })
    },
    goToProfile() {
      uni.navigateTo({ url: '/pages/technician/profile' })
    },
    goToHome() {
      uni.navigateTo({ url: '/pages/technician/home' })
    },
    goToTime() {
      uni.navigateTo({ url: '/pages/technician/time' })
    },
    goToOrder() {
      uni.navigateTo({ url: '/pages/technician/settlement' })
    },
    goToMessage() {
      uni.navigateTo({ url: '/pages/technician/message' })
    },
    goToCallback(){
      uni.navigateTo({ url: '/pages/technician/callback' })
    },
	goToSupplies() {
	  uni.navigateTo({ url: '/pages/technician/supplies' })
	},
	goToWallet() {
	  uni.navigateTo({ url: '/pages/technician/wallet' })
	},
	goToSettlement() {
	  uni.navigateTo({ url: '/pages/technician/settlement' })
	},
	goToStats() {
	  uni.navigateTo({ url: '/pages/technician/stats' })
	},
    goToSettings() {
      uni.navigateTo({
        url: '/pages/technician/settings'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0 0 100rpx;  /* 为顶部标题和底部导航栏留出空间 */
}

.my-container {
  min-height: 100vh;
  background: #F8F8F8;

  .status-bar {
    padding: 20rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #3B96FF, #2B85E4);
    color: #FFFFFF;

    .online-status {
      display: flex;
      align-items: center;
      gap: 10rpx;

      .status-dot {
        width: 16rpx;
        height: 16rpx;
        background: #4CD964;
        border-radius: 50%;
        box-shadow: 0 0 10rpx rgba(76, 217, 100, 0.5);
      }

      text {
        font-size: 28rpx;
        color: #FFFFFF;
      }
    }

    .right-icons {
      display: flex;
      gap: 30rpx;

      .iconfont {
        font-size: 40rpx;
        color: #FFFFFF;
        
        &.icon-setting {
          font-size: 38rpx;
        }
      }
    }
  }

  .user-info {
    padding: 40rpx 30rpx;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #3B96FF, #2B85E4);
    border-radius: 0 0 30rpx 30rpx;
    box-shadow: 0 6rpx 16rpx rgba(43, 133, 228, 0.15);
    margin-bottom: 30rpx;

    .avatar-box {
      width: 140rpx;
      height: 140rpx;
      background: rgba(255, 255, 255, 0.2);
      border: 4rpx solid rgba(255, 255, 255, 0.6);
      border-radius: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      overflow: hidden;

      .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      text {
        color: #FFFFFF;
        font-size: 24rpx;
      }
    }

    .user-detail {
      flex: 1;

      .name {
        font-size: 36rpx;
        color: #FFFFFF;
        font-weight: 600;
        margin-bottom: 12rpx;
      }

      .employee-no {
        display: flex;
        align-items: center;
        gap: 20rpx;

        text {
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.85);
          background: rgba(255, 255, 255, 0.15);
          padding: 8rpx 16rpx;
          border-radius: 30rpx;
        }
      }
    }

    .logout-btn {
      padding: 16rpx 28rpx;
      background: rgba(255, 255, 255, 0.2);
      border: 2rpx solid rgba(255, 255, 255, 0.6);
      border-radius: 40rpx;
      margin-left: 20rpx;
      transition: all 0.3s;

      &:active {
        background: rgba(255, 255, 255, 0.3);
      }

      text {
        color: #FFFFFF;
        font-size: 28rpx;
        font-weight: 500;
      }
    }
  }

  .stat-cards {
    padding: 0 20rpx 20rpx;

    .stat-row {
      display: flex;
      gap: 20rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .stat-item {
        flex: 1;
        background: #FFFFFF;
        border-radius: 16rpx;
        padding: 30rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        
        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
        }

        .stat-icon {
          width: 56rpx;
          height: 56rpx;
          margin-bottom: 24rpx;
          filter: invert(45%) sepia(66%) saturate(2848%) hue-rotate(198deg) brightness(98%) contrast(101%);
        }

        .stat-label {
          font-size: 32rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 10rpx;
        }

        .stat-value {
          font-size: 44rpx;
          color: #2B85E4;
          font-weight: bold;
        }

        .stat-tag {
          font-size: 24rpx;
          color: #FF9500;
          background: rgba(255, 149, 0, 0.1);
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
  }

  .section-title {
    padding: 30rpx 30rpx 20rpx;
    display: flex;
    align-items: center;
    gap: 12rpx;

    .title-bar {
      width: 8rpx;
      height: 36rpx;
      background: #2B85E4;
      border-radius: 4rpx;
    }

    text {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
    }
  }

  .menu-list {
    background: #FFFFFF;
    border-radius: 16rpx;
    margin: 0 20rpx 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
    overflow: hidden;

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32rpx 30rpx;
      border-bottom: 2rpx solid #F5F5F5;
      transition: all 0.2s;

      &:active {
        background-color: #F9F9F9;
      }

      &:last-child {
        border-bottom: none;
      }

      text {
        font-size: 30rpx;
        color: #333;
      }

      .right-content {
        display: flex;
        align-items: center;
        gap: 10rpx;

        .status-text {
          font-size: 26rpx;
          color: #999;

          &.red-text {
            color: #FF4B4B;
          }
        }

        .icon-arrow-right {
          font-size: 32rpx;
          color: #999;
        }
      }
    }
  }

  .version-info {
    padding: 40rpx 0;
    text-align: center;
    
    text {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
</style> 